import React, { useState, useCallback } from "react";
import { InboxOutlined } from "@ant-design/icons";
import { message, Upload } from "antd";
import * as imglyRemoveBackground from "@imgly/background-removal";
import type { UploadProps } from "antd";

const { Dragger } = Upload;

function Koutu() {
  const [imgSrc, setImgSrc] = useState("");

  const props: UploadProps = {
    name: "file",
    // action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
    maxCount: 1,
    beforeUpload(file) {
      imglyRemoveBackground.removeBackground(file).then((blob: Blob) => {
        const url = URL.createObjectURL(blob);
        setImgSrc(url);

      });
      return false;
    },
    onChange(info) {
      const { status } = info.file;
      if (status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (status === "done") {
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    onDrop(e) {
      console.log("Dropped files", e.dataTransfer.files);
    },
  };

  return (
    <>
      <Dragger {...props}>
        <p className="ant-upload-drag-icon">
          <InboxOutlined />
        </p>
        <p className="ant-upload-text">
          Click or drag file to this area to upload
        </p>
        <p className="ant-upload-hint">
          Support for a single or bulk upload. Strictly prohibited from
          uploading company data or other banned files.
        </p>
      </Dragger>
      {imgSrc && (
        <div>
          <h1>抠图结果</h1>
          <img src={imgSrc} />
        </div>
      )}
    </>
  );
}

export default Koutu;
